<template>
    <div>
        <div style="display: flex;width: 100%;height: 100vh">
            <div style="width: 50%;height: 100%;background-color: #fff;display: flex;justify-content: center;">
                <div style="width: 50%;">
                    <div style="margin: 4rem 0 0 -5rem;">
                        <!-- <img src="../assets/img/logo/logo.jpg" /> -->
                        <img style="width: 20rem;height:5rem" src="../assets/img/logo/2.svg" />
                    </div>
                    <div class="welcome-title">{{$t('登录页.欢迎')}}</div>
                    <div class="subtitle-guide">{{$t('登录页.请填写信息')}}</div>
                    <!-- 表单 -->
                    <div style="margin-left: 2rem;">
                        <el-form :model="accountInfo" label-width="23rem" label-position="top" style="max-width: 37.5rem" :rules="rules" ref="loginRef">
                            <el-form-item prop="email">
                                <template #label>
                                    <div class="form-label-email">{{$t('Email')}}</div>
                                </template>
                                <template #default>
                                    <el-input v-model="accountInfo.email" class="form-input-email" :placeholder='placeholder[0]'></el-input>
                                </template>
                            </el-form-item>
                            <el-form-item prop="password">
                                <template #label>
                                    <div class="form-label-email">{{$t('Password')}}</div>
                                </template>
                                <template #default>
                                    <el-input type="password" show-password v-model="accountInfo.password" class="form-input-email" :placeholder="placeholder[1]"></el-input>
                                </template>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div style="margin-left: 2rem;">
                        <el-button class="login-btn" id="btn1" @click="loginWeb()">{{ $t('登录') }}</el-button>
                    </div>
                    <div style="margin: 2rem 0 0 2rem;">
                        <el-button class="login-btn" @click="shiftRegister()">{{ $t('注册') }}</el-button>
                    </div>
                </div>
            </div>
            <!-- 右边图片 -->
            <div style="width: 50%;">
                <div style="position: relative;width:100%;height:100%">
                    <img style="width: 100%;height: 100%;object-fit: cover;" src="../assets/img/image/back.png"/>
                    <!-- 盖住图标 -->
                    <!-- <div style="position: absolute;bottom: 1rem;right: 1rem;width: 4rem;height: 4rem;background-color: rgb(233,242,252);
                    box-shadow: 0 0 10px 10px rgb(233,242,252);"></div> -->
                </div>
                
            </div>
        </div>
    </div>
</template>
<script>
import { login } from '../apis/user'
import {buttonClick} from "@/util/buttonClick";
export default{
    name: 'MyComponent',
    data(){
        return{
            accountInfo:{
                email:'',
                password:'',
            },
            // 验证规则
            rules:{
                email:[
                    {required:false,message:'Please input email', trigger: 'blur'},
                    {min:1,message: 'Please input a valid email address', trigger: 'blur'}
                ],
                password:[
                    {required:false,message:'Please input old password',trigger: 'blur'},
                    {min:6,message: 'At least 6 characters', trigger: 'blur'}
                ],
            },
            placeholder:[this.$t('登录页.邮箱.placeholder'),this.$t('登录页.密码.placeholder')]
        }
    },
    created(){
        // this.$gtm.trackView({ page: this.$route.path,gtm: this.$route.meta.gtm });
    },
    mounted ( )  { 
        // const additionalData = this.$route.meta.gtmAdditionalEventData || {};
        this.$gtm.trackView({ page: this.$route.path,gtm: this.$route.meta.gtm });
    } ,
    methods:{
        shiftRegister(){
            this.$router.push('/register')
        },
        loginWeb(){
            login(this.accountInfo).then((res)=>{
                        console.log(res)
                        console.log(res.data.token);
                        if(res.code == 200 && res.status == 1){
                            localStorage.setItem('token', res.data.token)
                            this.$router.push('/')
                            const pagePath = window.location.href; // 当前页面 URL
                            const buttonName = 'login' // 按钮名称
                            buttonClick(pagePath, buttonName);
                        }
                    })
            // this.$refs.loginRef.validate((valid)=>{
            //     if(valid){
                    
            //     }
            // })
        }
    }
}
</script>
<style lang="scss" scoped>
.welcome-title{
    margin: 10rem 2rem;
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
    line-height: 2.3rem;
    color:rgb(21,13,63)
}
.subtitle-guide{
    margin: 0 2rem;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.9rem;
    line-height: 1.5rem;
    color:rgb(21,13,63)
}
.form-label-email{
    height: 1.75rem;
    line-height: 1.75rem;
    font-weight: 600;
    font-size: 1.125rem;
    color:rgb(21,13,63)
}
.form-input-email{
    width: 80%;
    height: 2.5rem;
    box-sizing: border-box;
    // border: 0.125rem solid rgb(200 225 255);
    border-radius: 0.43rem;
    // padding: 0.31rem 1.06rem;
}
.login-btn{
    width: 80%;
    height: 2.8rem;
    align-items: center;
    border:0.125rem solid rgb(21 13 63);
    border-radius: 1.25rem;
    cursor: pointer;
    font-size:1rem ;
    font-weight: 600;
    background-color: #fff;
    color: rgb(21 13 63);
}
.el-button:hover{
  background-color: rgb(104 49 255);
  color: #fff;
  border: none;
}
</style>